<template>
  <div class="subs">
    <el-carousel height="380px" :interval="5000" arrow="always">
      <el-carousel-item v-for="(image, index) in images" :key="index">
        <img
          :src="image"
          alt="Carousel Image"
          style="width: 100%; height: 100%; object-fit: cover"
        />
      </el-carousel-item>
    </el-carousel>
    <div class="sub">
      <div class="title">学车流程</div>
      <div class="content">
        <ul>
          <li v-for="(item, index) in subList" :key="index">
            <div class="left">
              <img :src="item.icon" alt="" />
            </div>
            <div class="right">
              <p class="p1">{{ item.title }}</p>
              <p class="p2">{{ item.content }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "BannerView",
  data() {
    return {
      images: [
        "https://www.jiakaobaodian.com/core-assets/static/images/common/home_banner_download.png",
        "https://www.jiakaobaodian.com/core-assets/static/images/common/home_banner_new1.jpeg",
        "https://www.jiakaobaodian.com/core-assets/static/images/common/home_banner_jiaolian.jpg",
        "https://www.jiakaobaodian.com/core-assets/static/images/common/home_banner_jiaxiaobang.png",
      ],
      subList: [
        {
          icon: "https://www.jiakaobaodian.com/core-assets/jiakao/application/home/files/967c5f51b9995b3cea6ac917ccebbd10.png",
          title: "科目一",
          content: "2024新题库",
        },
        {
          icon: "https://www.jiakaobaodian.com/core-assets/jiakao/application/home/files/9bfc61e92388bf9d0521dbbc5497172b.png",
          title: "科目二",
          content: "精选视频，详解考点",
        },
        {
          icon: "https://www.jiakaobaodian.com/core-assets/jiakao/application/home/files/5061edda4ba913bd8f1ca5bdaee8d1d7.png",
          title: "科目三",
          content: "全方位讲解，攻克难点",
        },
        {
          icon: "https://www.jiakaobaodian.com/core-assets/jiakao/application/home/files/ef73328f70c08beb91f54eae709a05b1.png",
          title: "科目四",
          content: "2024新题库",
        },
      ],
    };
  },
};
</script>

<style scoped>
/* Add any styling you need here */
::v-deep .el-carousel__arrow--left {
  display: none;
}
::v-deep .el-carousel__arrow--right {
  display: none;
}
::v-deep .el-carousel__button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
}
::v-deep .el-carousel__indicator--horizontal.is-active button {
  background-color: #007aff;
}
.subs {
  position: relative;
  width: 100%;
  height: 380px;
}
.sub {
  padding: 0 20px;
  position: absolute;
  top: 20px; /* 相对于父盒子的顶部边界向下移动20像素 */
  left: 10%; /* 相对于父盒子的左边界向右移动30像素 */
  width: 280px;
  height: 340px;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 999;
}
.title {
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  border-bottom: 1px dotted #ddd;
  text-align: center;
}
.left img {
  height: 45px;
  width: 45px;
  margin-right: 10px;
  border-radius: 50%;
}
.content ul li {
  display: flex;
  padding: 13px 0;
}
.p1 {
  color: #37b5f8;
  font-size: 16px;
  cursor: pointer;
}
.p2 {
  margin-top: 5px;
  color: #666;
  font-size: 14px;
  line-height: 1.01;
}
</style>
